<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学生管理</title>
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="./css/student_management.css">
	<link rel="stylesheet" href="../student/css/head.css">
	<script src="/scriptZIP/vue.global.prod.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	
	<script src="/js/common.js"></script>
</head>

<body>
	<div id="container" >
		<div id="vue-root" v-cloak>
			<div class="contain p-top">
				<div class="header">
					<div class="header_title">学生管理</div>
					<img src="../image/return.png" alt="" class="return" onclick="history.back()">
				</div>

			</div>
			<div class="student-select">
				<div class="container">
					<div class="class-select">
						<div class="classes" @click="popShow=true">{{classesPick.name?classesPick.name:'选择班级'}}</div>
						<div class="class_num" v-if="classesPick.name">本班人数：<span>{{students0.length}}</span>人</div>
					</div>
					<div class="student-search">
						<div class="search-input">
							<input v-model="studentName" placeholder="搜索学生">
							<img src="../image/search_1.png" alt="">
						</div>

					</div>
				</div>
			</div>
			<div class="student-content">
				<div class="container">
					<div class="student-classify">
						<div class="bind-ok" @click="bound=true">
							<img class="icon_img" src="../image/img/baoming_icon.png" alt="">
						</div>
						<div class="all" @click="bound=null">
							<img class="icon_img" src="../image/img/all_icon.png" alt="">
						</div>
						<div class="bind-no" @click="bound=false">
							<img class="icon_img" src="../image/img/weibaoming_icon.png" alt="">
						</div>
					</div>
					<div class="student-table">
						<table cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th style="width: 65px;">序号</th>
									<th>姓名</th>
									<th>手机号</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody class="scorll">
								<tr v-for="(item,index) in students" :key="index">
									<td style="width: 65px;">{{index+1}}</td>
									<td>{{item.name}}</td>
									<td>
										<a v-if="item.phone" :href="'tel:'+item.phone" v-text="item.phone"></a>
									</td>
									<td>
										<a style="color: #79c4fe;"
											:href="'student_particulars.html?id='+item.id">查看详情</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<transition name="fade">
				<div class="pop-up" v-if="popShow" @click="popShow=false">
					<div class="pop-content" @click.stop>
						<div class="pop-hint">请选择班级</div>
						<div class="pop-border"></div>
						<div>
							<div class="class_item" v-for="(item,index) in classess" :key="item" @click="pickClass(item)">
								<span :style="{color:classesPick.id==item.id?'#f4c685':''}">{{item.name}}</span>
								<img src="../image/pop-ok.png" class="pop-pick" v-show="classesPick.id==item.id" alt="">
							</div>
						</div>
						<div class="confirm" @click="popShow=flase">确定</div>
					</div>
				</div>
			</transition>

		</div>
	</div>



	<script>
		Vue.createApp({
			data: function () {
				return {
					classess: [],
					students0: [],
					studentName: '',
					classesPick: {},
					popShow: false,
					bound: null,
					boundSet: {}
				}
			},
			created: function () {
				axios.get('/t/classes').then(function (res) {
					this.classess = res.data;
					var id = sessionStorage.classesId;
					if (id) this.classess.forEach(function (it) {
						if (it.id == id) this.pickClass(it);
					}.bind(this));
				}.bind(this));
			},
			methods: {
				pickClass: function (classes) {
					this.classesPick = classes;
					// this.popShow = false;
				},
				getData: function () {
					if (!this.classesPick.id) return;
					axios.get('/t/student/all/' + this.classesPick.id).then(function (res) {
						this.students0 = res.data;
					}.bind(this));
					axios.get('/t/student/bound/' + this.classesPick.id).then(function (res) {
						this.boundSet = toSet(res.data);
					}.bind(this));
				}
			},
			computed: {
				students: function () {
					var list = this.students0;
					if (this.studentName) list = list.filter(function (it) {
						return it.name.indexOf(this.studentName) >= 0;
					}.bind(this));
					if (this.bound !== null) list = list.filter(function (it) {
						return (it.id in this.boundSet) == this.bound;
					}.bind(this));
					return list;
				}
			},
			watch: {
				classesPick: function (nv, ov) {
					this.getData();
					sessionStorage.classesId = nv.id;
				}
			}
		}).mount('#vue-root');
	</script>
</body>

</html>